<template>
  <div class="alert-box">
    <ul class="serch-ul">
      <li @click="showPickerClick(2)">
        <span style="text-align: center;">{{channelobj.text}}</span>
        <van-icon name="arrow-down" />
      </li>
      <li @click="showPickerClick(0)">
      
        <span style="text-align: center;">{{sortText}}</span>
        <van-icon name="arrow-down" />
      </li>
    </ul>
    <van-popup v-model="showPicker2 " position="bottom">
      <van-picker
        show-toolbar
        :columns="channelData"
        @cancel="showPicker2=false"
        @confirm="onConfirm0"
      />
    </van-popup>
    <van-popup v-model="showPicker " position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker=false"
        @confirm="onConfirm"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
// import priceData from "../../assets/data/priceData.json";
import { getpricecat } from "../../api/price";
import { newsTitle } from "../../assets/data/menuData.js";
export default {
  props:["arr"],
  data() {
    return {
      showPicker: false,
      showPicker2: false,
      columns: [],
      columns1: {},
      columns2: {},
      sortText: "All",
      sortobj: {},
      sortobj1: {},
      pricepartObj: this.$store.state.nocaches.pricepartObj,
      channelobj: this.$store.state.nocaches.pricepartObj.select,
      channelData:this.arr, 
      resdatatcl: [],
      resdatadc: [],
      resdatadlg: []
    };
  },
  computed: {
    pricepartObjs() {
      return this.$store.state.nocaches.pricepartObj;
    },
    thiArr(){
      return this.arr
    }
  },
  watch: {
    pricepartObjs(news, old) {
      this.pricepartObj = news;
      this.channelobj = news.select;
    },
    thiArr(n,o){
      console.log(333,n)
      this.channelData=n
    }
  },
  created() {
   
    this.getListData();
  },

  methods: {
    getListData() {
      //目录结构
      getpricecat().then(res => {
        if (res.code == "0000") {
          this.resdatadlg = res.data.dlg || [];
          this.resdatatcl = res.data.tcl || [];
          this.resdatadc = res.data.dc || [];
          //首次设置关键词
          let fisrtdata = res.data[this.channelobj.id];
          this.createjg(fisrtdata);
          this.$store.dispatch("acpricepartkw", fisrtdata[0].text);
        }
      });
    },
    //构建分类结构
    createjg(priceData) {
      for (let index = 0; index < priceData.length; index++) {
        const ele = priceData[index];
        if (!ele.children) {
          ele.children = [{ text: "All", id: "" }];
        }
      }
      this.columns1 = {
        values: priceData,
        className: "column1"
      };
      this.columns2 = {
        values: priceData[0].children,
        className: "column2"
      };
      this.columns = [this.columns1, this.columns2];
      this.sortobj = this.columns1.values[0];
      this.sortobj1 = this.sortobj.children[0];
      this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
      this.pricepartObj.cid = this.sortobj1.id || this.sortobj.id;
      this.$store.dispatch("acpricepartObj", this.pricepartObj);
      this.$store.dispatch("acpricepartkw", this.resdatadc[0].text);
    },

    //分类弹窗展示
    showPickerClick(i) {
      if (i == 0) {
        this.showPicker = true;
      } else if (i == 2) {
        this.showPicker2 = true;
      }
    },
    //分类数据变化
    onChange(picker, values) {
      setTimeout(() => {
         picker.setColumnValues(1, values[0].children);
      }, 40);
     
    },
    onConfirm0(value) {
      this.channelobj = value;
      this.showPicker2 = false;
      this.pricepartObj.channel = value.id;
      this.pricepartObj.select = value;
      this.pricepartObj.cid = "";
      this.sortText = "All";
      this.$store.dispatch("acpricepartObj", this.pricepartObj);
      if (this.channelobj.id == "dlg") {
        this.createjg(this.resdatadlg);
        this.$store.dispatch("acpricepartkw", this.resdatadlg[0].text);
      } else if (this.channelobj.id == "tcl") {
        this.createjg(this.resdatatcl);
        this.$store.dispatch("acpricepartkw", this.resdatatcl[0].text);
      } else {
        this.createjg(this.resdatadc);
        this.$store.dispatch("acpricepartkw", this.resdatadc[0].text);
      }
    },
    onConfirm(value) {
      this.sortobj = value[0];
      this.sortobj1 = value[1];
      this.showPicker = false;
      this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
      this.pricepartObj.cid = this.sortobj1.id || this.sortobj.id;
      this.$store.dispatch("acpricepartObj", this.pricepartObj);
       this.$store.dispatch("acpricepartkw", value[0].text);
    }
  }
};
</script>
<style scoped lang="less">
.alert-box {
  margin-bottom: 0.3rem;
}
.serch-ul {
  width: 100%;
  padding:0.1rem .3rem;
  // height: 0.88rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 8px 0 rgba(0, 10, 0, 0.2);
  li {
    min-width: 2.1rem;
    min-height: 0.6rem;
    font-size: 0.3rem;
    padding: 0 0.3rem;
    color: rgba(43, 43, 43, 1);
    background: rgba(243, 246, 249, 1);
    &:first-child {
      margin-right: .6rem;
    }
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    &.active {
      font-weight: 500;
      color: rgba(228, 152, 41, 1);
      &::after {
        position: absolute;
        content: "";
        display: block;
        width: 0.32rem;
        height: 0.08rem;
        background: rgba(228, 157, 53, 1);
        border-radius: 0.05rem;
        bottom: 0;
      }
    }
  }
}
.module-box {
  width: 100%;
  height: 0.9rem;
  background: #ffffff;
  display: flex;
  .module-boxitem {
    flex: 1;
    option {
      text-align: center;
    }
  }
}
</style>
